<template>
	<view class="content display displayColumn width-100 fontSize font_comm">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">油站订单</text>
			</template>
		</u-navbar>
		<view class="number display width-100 ">
			<view :class="{fn_number:selectIndex==index,fn_number1:selectIndex!=index, display:true,  all_item:true,'M-L30':true}" style="margin-top: 34rpx;" v-for="(item,index) in numberArr" :key="index" @click="changeIndex(index)">
				<span class="fn_tianshu" :style="{color:selectIndex==index?'#FFF':'#72778A;'}">{{item}}</span>
			</view>
		</view>
		<!-- 面板 -->
		<view class="fn_mianban display width-100 all_item M-T24">
			<view class="fn_mianban_item display all_item ">
				<view class="fn_item display displayColumn all_item">
					<span class="fn_txt1">{{info.orderNums || 0}}</span>
					<span class="fn_txt2">订单数</span>
				</view>
				<view class="fn_item display displayColumn all_item">
					<span class="fn_txt1">￥<span style="font-size: 40rpx;">{{info.totalAmount || 0}}</span></span>
					<span class="fn_txt2">营业额</span>
				</view>
				<view class="fn_item display displayColumn all_item">
					<span class="fn_txt1">{{Number(info.totalVolume || 0)}}L</span>
					<span class="fn_txt2">总油量</span>
				</view>
			</view>
		</view>
		<!-- 滚动 -->
		<scroll-view id="ceshi" scroll-y="true" class="scroll-Y " :style="{height: scrollHeight}" @scrolltolower="scrolltolower">
			<view class="fn_chesi_all display  displayColumn width-100 displaycenter_aliem">
				<view class="fn_cheshi_item display  displayColumn M-T24" v-for="(item,index) in list" :key="index">
					<view class="fn_cheshiOne display ">
						<view class="cheshiOne_left display  displaycenter_aliem">
							<image class="image M-L24" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/3fb802cfb416426e9c06b5fc9040abe0.png" mode=""></image>
							<span class="wode_menm M-L24">{{item.stationName}}</span>
						</view>
						<view class="cheshiOne_right display  displaycenter_aliem">
							<!-- <span class="huiyuan M-R24">会员价：6.58</span> -->
						</view>
					</view>
					<view class="fn_cheshiTwo display  displaycenter_aliem wode_txt1" style="margin-top: 16rpx;">
						<span class="M-L24">{{item.petrolName}}</span><span style="margin-left: 12rpx;">|</span><span style="margin-left: 12rpx;">{{Number(item.volume)}}L</span><span style="margin-left: 12rpx;">{{item.createTime}}</span>
					</view>
					<view class="fn_cheshiThree display  displaycenter_aliem" style="margin-top: 10rpx;">
						<span class="fn_ttx1 M-L24">￥<span style="font-size: 40rpx;">{{item.useAmount}}</span></span>
						<button class="wode_btn display  all_item  M-R24" @click="Orderdeitali(item.id)">订单详情</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numberArr:['近七天','近30天','近90天'],
				selectIndex:0,
				scrollHeight:'90vh',
				list:[],
				id:'',
				info:{},//总数据
				pageNum:1
			}
		},
		onLoad(options){
			this.id = options.id;
			// 获取信息
			this.getAllList();
			this.getInfos();
		},
		onReady() {
		      const that = this
		      this.$nextTick(() => {
		        uni.getSystemInfo({
		          success: function (res) {
		            const query = wx.createSelectorQuery()
		            query.select('#ceshi').boundingClientRect()
		            // 获取滚动容器css数据
		            query.exec((resData) => {
						console.log(resData)
		              if (resData && resData.length) {
		                // 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
		                that.scrollHeight = (res.windowHeight - resData[0].top)*2 - 30 + 'rpx'
						console.log(that.scrollHeight)
		              }
		            })
		          },
		        })
		      })
			},
		methods: {
			changeIndex(index){
				this.selectIndex=index;
				this.pageNum = 1;
				this.list = [];
				this.getAllList()
				this.getInfos();
			},
			// 触底加载
			scrolltolower(){
				this.pageNum++;
				this.getAllList();
			},
			// 订单详情
			Orderdeitali(id){
				this.$tab.navigateTo('/packageC/ordersDtils/ordersDtils?id='+id)
			},
			getInfos(){
					let data = {
						stationId:this.id,
						limitDays:this.numberArr[this.selectIndex]=='近七天'?'7':this.numberArr[this.selectIndex]=='近30天'?'30':90
					}
					this.$req.get('/xcx/petrolCardLog/getTotalData',data).then(res=>{
						console.log(res)
						if(res.data.code==200){
							this.info = res.data.data
						}else{
							this.$modal.msg(res.data.msg);
						}
					})
			},
			getAllList(){
				
				// 获取时间
				this.$modal.loading('加载中 ');
				let data = {
					limitDays:this.numberArr[this.selectIndex]=='近七天'?'7':this.numberArr[this.selectIndex]=='近30天'?'30':90,
					pageNum:this.pageNum,
					pageSize:10,
					stationId:this.id
				}
				console.log(data);
				this.$req.get('/xcx/petrolCardLog/list',data).then(res=>{
					console.log(res)
					this.$modal.closeLoading()
					if(res.data.code==200){
						this.list = this.list.concat(res.data.rows)
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getdate(days){
				let newDate = uni.$u.date(new Date(), 'yyyy-mm-dd hh:MM:ss');
				console.log(newDate)
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
.title{
	color: #212121;
}
.fn_number{
	// width: 94rpx;
	
	height: 42rpx;
	background: #126BC9;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_number1{
	height: 42rpx;
	background: #FFFFFF;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	border: 2rpx solid #72778A;
}
.fn_tianshu{
	padding-left: 14rpx;
	padding-right: 14rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.fn_mianban_item{
	justify-content: space-around;
	width: 690rpx;
	height: 162rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_txt2{
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	margin-top: 12rpx;
}
.fn_txt1{
	font-weight: 600;
	font-size: 40rpx;
	color: #126BC9;
}
.fn_cheshiOne{
	justify-content: space-between;
}
.fn_cheshi_item{
	width: 690rpx;
	// height: 206rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.image{
	width: 32rpx;
	height: 32rpx;
}
.wode_menm{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.huiyuan{
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}
.wode_txt1{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.wode_btn{
	width: 200rpx;
	height: 62rpx;
	background: rgba(18,107,201,0.1);
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	border: 2rpx solid;
	border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
	font-weight: 600;
	font-size: 24rpx;
	color: #126BC9;
}
.fn_ttx1{
	font-weight: 600;
	font-size: 24rpx;
	color: #FF672D;
}
.fn_cheshiThree{
	justify-content: space-between;
}
</style>
